<template>
  <div class="taogifts">
    <a-card :bordered="false" style="border-radius:8px;margin-top:10px">
      <div class="card_title">
        淘礼金
      </div>
      <div class="groupbox flex row_bet flex_wrap" style="margin-bottom: 19px">
        <a-radio-group v-model="status" style="margin-bottom:5px;" @change="statusChange">
          <a-radio-button :value="3">
            全部
          </a-radio-button>
          <a-radio-button :value="1">
            已成交
          </a-radio-button>
          <a-radio-button :value="2">
            未成交
          </a-radio-button>
        </a-radio-group>
        <div class="flex flex_wrap col_center">

          <a-range-picker
            :ranges="{
              本周: [moment().subtract(parseInt(moment().format('d')) - 1, 'days'), moment()],
              上周: [
                moment().subtract(parseInt(moment().format('d')) + 6, 'days'),
                moment().subtract(parseInt(moment().format('d')), 'days')
              ],
              本月: [
                moment()
                  .month(moment().month())
                  .startOf('month'),
                moment()
                  .month(moment().month())
                  .endOf('month')
              ],
              上月: [
                moment(
                  moment()
                    .subtract(1, 'month')
                    .format('YYYY-MM') + '-01'
                ),
                moment(
                  moment()
                    .subtract(1, 'month')
                    .format('YYYY-MM') + '-01'
                )
                  .subtract(-1, 'month')
                  .add(-1, 'days')
              ],
              半年: [
                moment()
                  .startOf('day')
                  .subtract(6, 'month'),
                moment()
              ]
            }"
            format="YYYY-MM-DD"
            @change="timeChange"
            style="width:230px;margin-right:5px;margin-bottom: 5px;"
          >
          </a-range-picker>
          <a-input-search
            placeholder="商品ID / 店铺名"
            style="width: 200px;margin-right:10px;margin-bottom:5px;"
            v-model="search"
            allowClear
            @search="onSearch"
          />
          <a-button type="primary" icon="plus" @click="drawershow = true" class="br4" style="margin-bottom:5px;">
            添加信息
          </a-button>
        </div>
      </div>
      <a-table
        :columns="columns"
        :rowKey="activity => activity.gm_id"
        :dataSource="activity"
        :loading="loading"
        @change="handleTableChange"
        :pagination="pagination"
      >
        <div slot="gm_goodsurl" slot-scope="text,row">
          <div class="line-3" style="width: 288px;">{{ row.gm_goodsurl }}</div>
        </div>
        <div slot="active" slot-scope="row">
          <div>
            <a-button type="link" @click="doedit(row)">编辑</a-button>
          </div>
          <a-button type="link" @click="goaudit(row)">删除</a-button>
        </div>
      </a-table>
    </a-card>
    <a-drawer
      title="添加信息"
      :width="513"
      :visible="drawershow"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
    >
      <div class="drawer1">
        <div class="titles">联系方式</div>
        <a-input v-model="form.gm_contact" placeholder="联系方式" class="chooseipt br4"/>
        <div class="titles">店铺名字</div>
        <a-input v-model="form.gm_shopname" placeholder="店铺名字" class="chooseipt br4"/>
        <div class="titles">商品链接</div>
        <a-textarea v-model="form.gm_goodsurl" :rows="4" placeholder="" class="chooseipt br4" allowClear>
        </a-textarea>
        <div class="titles">多少单</div>
        <a-input v-model.number="form.gm_num" placeholder="多少单" class="chooseipt br4"/>
        <div class="titles">是否返款</div>
        <a-radio-group v-model="form.gm_refunds" class="chooseipt">
          <a-radio value="已返款" style="margin-right: 63px;">
            已返款
          </a-radio>
          <a-radio value="未返款">
            未返款
          </a-radio>
        </a-radio-group>
        <div
          :style="{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
            zIndex: 1
          }"
        >
          <a-button type="primary" style="float:left;" :loading="btnloading" class="br4" @click="dosubmit">
            提 交 数 据
          </a-button>
        </div>
      </div>
    </a-drawer>
  </div>
</template>

<script>
  import { doaddtaogifts, gettaogiftslist, updatetaogifts } from '@/api/dockingApi'
  import moment from 'moment'

  export default {
    name: 'Taogifts',
    data () {
      return {
        moment,
        drawershow: false,
        status: 3,
        search: '',
        start: null,
        end: null,
        form: {
          gm_contact: '',
          gm_shopname: '',
          gm_goodsurl: '',
          gm_num: '',
          gm_refunds: ''
        },
        titleList: [],
        columns: [
          {
            title: '提交时间',
            align: 'left',
            dataIndex: 'gm_add_time',
            scopedSlots: {
              customRender: 'gm_add_time'
            }
          },
          {
            title: '联系方式',
            align: 'center',
            dataIndex: 'gm_contact',
            scopedSlots: {
              customRender: 'gm_contact'
            }
          },
          {
            title: '店铺名字',
            align: 'center',
            dataIndex: 'gm_shopname',
            scopedSlots: {
              customRender: 'gm_shopname'
            }
          },
          {
            title: '产品链接',
            align: 'center',
            dataIndex: 'gm_goodsurl',
            scopedSlots: {
              customRender: 'gm_goodsurl'
            }
          },
          {
            title: '多少单',
            align: 'center',
            dataIndex: 'gm_num',
            scopedSlots: {
              customRender: 'gm_num'
            }
          },
          {
            title: '是否成交',
            align: 'center',
            dataIndex: 'gm_deal',
            scopedSlots: {
              customRender: 'gm_deal'
            }
          },
          {
            title: '是否返款',
            align: 'center',
            dataIndex: 'gm_refunds',
            scopedSlots: {
              customRender: 'gm_refunds'
            }
          },
          {
            title: '备注',
            align: 'center',
            dataIndex: 'gm_mark',
            scopedSlots: {
              customRender: 'gm_mark'
            }
          },
          {
            title: '操作',
            align: 'center',
            scopedSlots: {
              customRender: 'active'
            }
          }
        ],
        activity: [
          {
            gm_id: 81, // 自增id
            gm_user: '从雪艳', // 用户
            gm_contact: 'tc449216705', // 联系放
            gm_shopname: '大大王蔬果', // 店铺名称
            gm_goodsurl: 'https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.3e071debvx0fz2&ft=t&id=605141947164&qq-pf-to', // 商品地址
            gm_deal: '', // 是否成交
            gm_num: 400, // 成交数量
            gm_refunds: '', // 是否退款
            gm_add_time: null, // 添加时间
            gm_mark: null, // 备注
            braId: 1
          }
        ],
        loading: false,
        pagination: {
          pageSize: 15,
          page: 1
        },
        value: '',
        btnloading: false,
        pass:
          moment().startOf('month').format('YYYY-MM-DD') +
          ' 至 ' +
          moment().format('YYYY-MM-DD')
      }
    },

    computed: {},
    created () {
      this.gettaogiftslist(1, 15, 4)
    },
    mounted () {
    },
    methods: {
      timeChange (dates, dateStrings) {
        // console.log('From: ', dates[0], ', to: ', dates[1])
        // console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
        if (dates.length === 0) {
          this.start = null
          this.end = null
        } else {
          this.start = dates[0].unix()
          this.end = dates[1].unix()
          // console.log(this.start, this.end)
        }
        this.gettaogiftslist(1, 15, this.status, this.search)
        // const str = moment(dateStrings[0]).format('YYYY-MM-DD') + ' 至 ' + moment(dateStrings[1]).format('YYYY-MM-DD')
        // this.pass = str
      },
      doedit (row) {
        // console.log(row)
        this.form = row
        this.drawershow = true
      },
      onClose () {
        this.form = {}
        this.drawershow = false
      },
      goaudit (row) {
        console.log('删除', row)
      },
      handleChange2 (info) {
        const status = info.file.status
        // fin_fileName
        if (status !== 'uploading') {
          // console.log(info.file, info.fileList)
          this.form.fin_fileName = '//' + info.file.response.data.url
        }
        if (status === 'done') {
          this.$message.success(`${info.file.name} 上传成功!`)
        } else if (status === 'error') {
          this.$message.error(`${info.file.name} 上传失败!`)
        }
      },
      dosubmit () {
        this.btnloading = true
        // console.log(this.form)
        if (!this.form.fin_id) {
          if (
            this.form.fin_shopName !== '' &&
            this.form.fin_goodsUrl !== '' &&
            this.form.fin_retPpt !== '' &&
            this.form.fin_retCash !== '' &&
            this.form.fin_payType !== '' &&
            this.form.fin_contact !== '' &&
            this.form.fin_payUser !== '' &&
            this.form.fin_fileName !== ''
          ) {
            doaddtaogifts(this.form).then(res => {
              // console.log(res)
              if (res.code === 200) {
                this.$message.success('提交成功!')
                this.gettaogiftslist(1, 15, 3)
                this.drawershow = false
                this.form = {}
                this.btnloading = false
              } else {
                this.btnloading = false
                this.$message.error(res.msg)
              }
            }).catch(err => {
              this.btnloading = false
              console.log(err)
            })
          } else {
            this.$message.info('请检查所需条件!')
          }
        } else {
          this.form.id = this.form.gm_id
          updatetaogifts(this.form).then(res => {
            // console.log(res)
            if (res.code === 200) {
              this.$message.success('修改成功!')
              this.gettaogiftslist(1, 15, 3)
              this.drawershow = false
              this.form = {}
              this.btnloading = false
            } else {
              this.btnloading = false
              this.$message.error(res.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        }
      },
      gettaogiftslist (page, pagesize, status, search) {
        this.loading = true
        gettaogiftslist({
          page: page,
          pagesize: pagesize,
          status: status, // 1已成交 2未成交
          search: search,
          start: this.start,
          end: this.end
        })
          .then(res => {
            // console.log(res)
            this.activity = res.data.data
            //  this.count = res.data.count
            const pagination = {
              ...this.pagination
            }
            pagination.total = res.data.count
            this.pagination = pagination
            this.loading = false
          })
          .catch(err => {
            console.log(err)
          })
      },
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.loading = true
        this.gettaogiftslist(params.page, 15, this.status, this.search)
      },
      onSearch (value) {
        // console.log(value)
        this.gettaogiftslist(1, 15, this.status, this.search)
      },
      statusChange (e) {
        // console.log('radio checked', e.target.value)
        this.gettaogiftslist(1, 15, this.status, this.search)
      },
      titleChange (value) {
        // console.log(`selected ${value}`)
        this.form.fin_shopName = value
      }
    }
  }
</script>
<style lang="less">
  .drawer1 {
    .titles {
      color: rgba(16, 16, 16, 100);
      font-size: 13px;
      text-align: left;
      margin-bottom: 8px;
    }

    .chooseipt {
      width: 100%;
      margin-bottom: 25px;
    }

    /deep/ .ant-input {
      border-radius: 4px;
    }

    /deep/ .ant-select-selection {
      border-radius: 4px;
    }
  }
</style>
<style lang="less" scoped>
  .taogifts {
    .card_title {
      color: rgba(16, 16, 16, 100);
      font-size: 14px;
      margin-bottom: 15px;
      font-weight: 600;
    }

    .groupbox {
      /deep/ .ant-input {
        border-radius: 4px;
      }
    }

    /deep/ .ant-table-tbody {
      font-size: 13px;
    }
  }
</style>
